<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>调用统计 - <?= $systemConfig['system_name'] ?? '' ?></title>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/layui/layui.js"></script>
<script src="/static/js/echarts.min.js"></script>
<style>*{margin:0;padding:0;box-sizing:border-box;}body{background:#f5f7fa;font-family:"Microsoft YaHei","PingFang SC",sans-serif;}
.header{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);}.header .inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:60px;}
.header .logo{font-size:20px;font-weight:700;color:#1e3c72;text-decoration:none;}.header .nav{display:flex;gap:16px;}
.header .nav a{color:#555;text-decoration:none;font-size:14px;padding:8px 12px;border-radius:4px;}.header .nav a:hover,.header .nav a.active{color:#1e9fff;background:#f0f7ff;}
.container{max-width:1200px;margin:0 auto;padding:20px;}.card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.05);margin-bottom:20px;}
.card h3{font-size:17px;margin-bottom:14px;color:#333;padding-bottom:10px;border-bottom:1px solid #eee;}#chart{width:100%;height:300px;}</style>
</head>
<body>
<div class="header"><div class="inner">
    <a href="/" class="logo"><?= $systemConfig['system_name'] ?? '' ?></a>
    <div class="nav"><a href="/user/index/dashboard">控制台</a><a href="/user/index/packages">套餐市场</a><a href="/user/index/myApps">我的应用</a><a href="/user/index/callStats" class="active">调用统计</a><a href="/user/index/myOrders">我的订单</a><a href="/user/index/myPackages">已购套餐</a><a href="/user/index/recharge">余额充值</a><a href="/user/index/apiDoc">接入文档</a><a href="/user/index/profile"><?= $userInfo['nickname'] ?? $userInfo['username'] ?></a><a href="/user/index/logout">退出</a></div>
</div></div>
<div class="container">
    <div class="card"><h3>近7天调用量趋势</h3><div id="chart"></div></div>
    <div class="card">
        <h3>调用明细</h3>
        <div style="margin-bottom:12px;">
            <div class="layui-inline"><select id="appFilter"><option value="">全部应用</option><?php foreach($apps as $app): ?><option value="<?= $app['app_id'] ?>" <?= $appId==$app['app_id']?'selected':'' ?>><?= $app['name'] ?></option><?php endforeach; ?></select></div>
            <div class="layui-inline"><select id="apiFilter"><option value="">全部接口</option><option value="idcard_2" <?= $apiName=='idcard_2'?'selected':'' ?>>身份证二要素</option><option value="face" <?= $apiName=='face'?'selected':'' ?>>人脸识别</option><option value="phone_3" <?= $apiName=='phone_3'?'selected':'' ?>>运营商三要素</option></select></div>
            <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="search()">筛选</button>
        </div>
        <table class="layui-table" lay-size="sm">
            <thead><tr><th>AppID</th><th>接口</th><th>状态</th><th>耗时(秒)</th><th>IP</th><th>时间</th><th>请求参数</th></tr></thead>
            <tbody>
                <?php foreach($logs as $log): ?><tr><td><?= $log['app_id'] ?></td><td><?= $log['api_title'] ?: $log['api_name'] ?></td><td><?= $log['status']?'<span style="color:green">成功</span>':'<span style="color:red">失败</span>' ?></td><td><?= $log['cost_time'] ?></td><td><?= $log['ip'] ?></td><td><?= $log['create_time'] ?></td><td style="max-width:180px;word-break:break-all;"><?= htmlspecialchars(substr($log['request_params'] ?? '', 0, 80)) ?></td></tr><?php endforeach; ?>
                <?php if(empty($logs)): ?><tr><td colspan="7" style="text-align:center;color:#999;">暂无调用记录</td></tr><?php endif; ?>
            </tbody>
        </table>
        <div id="page"></div>
    </div>
</div>
<script>
var total=<?= $total ?>,page=<?= $page ?>,pageSize=<?= $pageSize ?>;
var day7Data = <?= json_encode($day7Data, JSON_UNESCAPED_UNICODE) ?>;
layui.use(['laypage'],function(){var lp=layui.laypage;if(total>pageSize) lp.render({elem:'page',count:total,limit:pageSize,curr:page,jump:function(o,f){if(!f) location.href='/user/index/callStats?page='+o.curr+'&app_id=<?= urlencode($appId) ?>&api_name=<?= $apiName ?>';}});});
function search(){location.href='/user/index/callStats?app_id='+encodeURIComponent($('#appFilter').val())+'&api_name='+$('#apiFilter').val();}
var chart = echarts.init(document.getElementById('chart'));
var dates=[],counts=[];day7Data.forEach(function(d){dates.push(d.date);counts.push(d.count);});
chart.setOption({tooltip:{trigger:'axis'},xAxis:{data:dates},yAxis:{type:'value',minInterval:1},series:[{name:'调用量',type:'line',data:counts,smooth:true,itemStyle:{color:'#1e9fff'},areaStyle:{color:'rgba(30,159,255,0.1)'}}]});
window.addEventListener('resize',function(){chart.resize();});
</script>
</body>
</html>